<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading测试效果</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/loading-global.css">
<link rel="stylesheet" href="css/loading.css">

</head>
<style>
body,html{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.div-btn{
	width: 100%;
	max-width: 560px;
	/*margin:200px auto; */
}

.div-btn div{
	margin: 10px 0 ;
}

.test-div{
	width: 300px;
	height: 300px;
	margin:20px auto;
	border: 1px solid #aaa;
	position: relative;
}
</style>

<body>

<div class="div-btn">
	<div class="dw-btn btn-success" onClick="loading1()">默认效果</div>
	<div class="dw-btn btn-warning" onClick="loading8()">纵向文字颜色</div>
	<div class="dw-btn btn-primary" onClick="loading2()">纵向效果无title</div>
	<div class="dw-btn btn-danger" onClick="loading3()">纵向效果无title描述</div>
	<div class="dw-btn btn-warning " onClick="loading4()">其他背景色</div>
	<div class="dw-btn btn-success" onClick="loading5()">纵向图片效果</div>
	<div class="dw-btn btn-primary" onClick="loading6()">横向图片效果</div>
	<div class="dw-btn btn-danger" onClick="loading7()">横向进度效果,字体颜色</div>
	<div class="dw-btn btn-warning" onClick="loading10()">无过渡效果</div>
</div>

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/loading.js"></script>
<script type="text/javascript">

</script>

</body>
</html>